<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2020/6/17
  Time: 15:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <title>课程管理</title>
    <link rel="stylesheet" href="<%=basePath%>static/css/admin.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/pintuer.css">
    <script type="text/javascript" src="<%=basePath%>static/js/jquery.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/jqPaginator.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/pintuer.js"></script>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder">专业列表</strong></div>
    <div class="padding border-bottom">
        <button type="button" class="button border-yellow" onclick="addMajorWindow()"><span class="icon-plus-square-o"></span>增加课程</button>
    </div>
    <table class="table table-hover text-center">
        <tr>
            <th width="50%">专业编号</th>
            <th width="50%">专业名称</th>
        </tr>

        <tr><tbody id="tb"></tbody></tr>

        <div id="windowUpd" style="position: absolute;top: 20%;left: 40%;width: 450px;height: 460px;border: 1px solid red;display: none;background-color: wheat">
            <center><h4>修改专业信息</h4></center>
            <hr>
            <ul>
                <br>
                <li>课程编号：<input  type="text" name="majorid" id="m_idUpd"></li><br>
                <li>课程名称：<input type="text" name="majorname" id="m_nameUpd"></li><br>

                <input type="button" value="修改" onclick="updateMajor()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" value="取消" onclick="closeUpdWindow()">
            </ul>
        </div>

        <div id="windowAdd" style="position: absolute;top: 20%;left: 40%;width: 450px;height: 460px;border: 3px solid red;display: none;background-color: wheat">
            <center><h4>添加专业信息</h4></center>
            <hr>
            <ul>
                <br>
                <li>课程编号：<input  type="text" name="majorid" id="m_idAdd"></li><br>
                <li>课程名称：<input type="text" name="majorname" id="m_nameAdd"></li><br>

                <input type="button" value="添加" onclick="addMajor()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" value="取消" onclick="closeMajorWindow()">
            </ul>
        </div>
    </table>
</div>
</body>
<script type="text/javascript">
    var total = 0;//总条数
    var totalPages = 0;//总页数
    var visiblePages = 3;//显示的页码数
    var currentPage = 0;//当前页码

    $(document).ready(function () {
        //第一次访问，初始化全局变量
        showMajor(-1);
        $('#pagination1').jqPaginator({
            totalPages: totalPages,//总页数
            visiblePages: visiblePages,//显示的页码数
            currentPage: currentPage,//当前页码
            totalCounts: total,//总条数
            first: '<li class="first"><a href="javascript:void(0);">第一页</a></li>',
            prev: '<li class="prev"><a href="javascript:void(0);">前一页</a></li>',
            next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
            last: '<li class="last"><a href="javascript:void(0);">最后一页</a></li>',
            page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
            onPageChange: function (num) {
                /* num代表改变过后的页码 */
                showMajor(num);
            }
        });
    });

    function select() {
        /* 第一次访问，初始化全局变量 */
        showMajor(-1);
        $('#pagination1').jqPaginator({
            totalPages: totalPages,
            visiblePages: visiblePages,
            currentPage: currentPage,
            totalCounts: total,
            first: '<li class="first"><a href="javascript:void(0);">第一页</a></li>',
            prev: '<li class="prev"><a href="javascript:void(0);">前一页</a></li>',
            next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
            last: '<li class="last"><a href="javascript:void(0);">最后一页</a></li>',
            page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
            onPageChange: function (num) {
                // num代表改变过后的页码
                showMajor(num);
            }
        });
    }

    function showMajor(n) {
        $.ajax({
            url:"<%=basePath%>admin/queryMajor",//显示课程信息
            async:false,//同步请求（默认）
            type:"POST",//提交方式
            data:{"pageNum":n,"pageSize":7},//数据，多个以键值对的形式存在
            dataType:"json",//数据格式
            success:function (data) {
                //打印data到控制台，看看有没有从后台接收到数据
                console.log(data);
                if (n==-1){
                    //理解为第一次访问，初始化全局变量
                    total = data.totalSize;//总条数
                    totalPages = data.totalNum;//总页数
                    currentPage = data.pageNum;//当前页数
                }
                $("#tb").html(" ");
                if (data.list.length>0){
                    //使用jQuery形式遍历
                    $.each(data.list,function (n,val) {
                        var str = "";
                        str+="<tr>"+
                            "<td>"+val.majorid+"</td>"+
                            "<td>"+val.majorname+"</td>"+
                            "<td colspan='2'>" +
                            "<a class='button border-main' role='button' onclick='updMajorWindow(this)'><span class='icon-edit'></span> 修改</a>" +
                            "<a class='button border-red' role='button' onclick='delMajor(this)'><span class='icon-trash-o'></span> 删除</a></a>" +
                            "</td>"+
                            "</tr>"+
                            "<td>";
                        $("#tb").append(str);
                    })
                }else {
                    $("#tb").append("<tr><td colspan=8 align=\"center\">暂时没有可以选择的课程哦，请联系辅导员查询课程信息</td></tr>");
                }
            },
            error:function () {
                alert("服务器又又又出错啦")
            }
        });
    }

    //打开增加页面
    function addMajorWindow() {
        $("#windowAdd").show()
    }

    //关闭增加页面
    function closeMajorWindow() {
        $("#windowAdd").hide();
    }

    //增加课程信息
    function addMajor() {
        var majorid = $("#m_idAdd").val();
        var majorname = $("#m_nameAdd").val();


            $.ajax({
                url:"<%=basePath%>admin/updateMajor",
                type:"post",
                data:{"majorid":majorid,"majorname":majorname},
                success:function (data) {
                    console.log(data);
                    window.location.reload();//刷新页面
                    $("#windowAdd").hide();//将添加框隐藏起来
                },
                error:function () {
                    alert("添加失败")
                }
            })
    }

    //删除操作
    function delMajor(obj){
        var c_id = $(obj).parent().parent().find("td").eq(0).text()
        console.log("majorid="+majorid)
        var isNo = confirm("是否确认删除该课程?")
        if (isNo){
            $.ajax({
                url:"<%=basePath%>admin/deleteMajorById",
                type:"post",
                data:{"majorid":majorid},
                dataType:"text",
                success:function (data) {
                    console.log(data)
                    window.location.reload();
                    alert("操作成功!!");
                },
                error:function(){
                    alert("服务器出错！");
                }
            })
        }
    }

    //打开修改页面
    function updMajorWindow(obj) {
        //显示修改的模态框
        $("#windowUpd").show();
        //获取当前选中行的所有数据

        var majorid = $(obj).parent().parent().find("td").eq(0).text()
        var majorname = $(obj).parent().parent().find("td").eq(1).text()

        //把选中行的数据复制给修改框里的表单元素
        $("#m_idUpd").val(majorid)
        $("#m_nameUpd").val(majorname)

    }
    //关闭修改界面
    function closeUpdWindow() {
        $("#windowUpd").hide()
    }

    //修改课程信息
    function updateMajor() {
        //获取文本框的值
        var majorid =  $("#m_idUpd").val()
        var majorname = $("#m_nameUpd").val()

        $.ajax({
            url:"<%=basePath%>admin/updateMajor",
            type:"post",
            data:{"majorid":majorid,"majorname":majorname},
            dataType:"json",
            success:function (data) {
                console.log(data);
                select();
                $("#windowUpd").hide();
            }
        })
    }

</script>
</html>
